
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      #sexyline { 
          margin: 25px 0;
          height: 1px;
          background: #eeeee;
          background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, grey));
      }​
      div.thumbnail {
          display: block;
          position: relative;
      }
      div.thumbnail:hover .overlay {
          position: absolute;
          z-index: 3;
          width: 290px;
          height: 160px;
      }
      
      div.thumbnail .overlay .overlaycaption {
          text-align: center;
          position: absolute;
          height: 30px;
          line-height: 30px;
          width: 100%;
          z-index: 3;
          text-indent: -9999em;
          font-size: 11px;
          bottom: 0;
          overflow: hidden;
      }
      
      div.thumbnail:hover .overlaycaption {
          text-indent: 10px;
          background: rgb(255,255,255);
          /* for browsers that know rgba */
          background: rgba(255, 255, 255, 0.75);
      }
      
      div.thumbnail img { 
          display: block;
      }
      ​
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">drop.in</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit" style="padding: 10px 10px 10px 10px;">
        <div>
        <div style="float: right; text-align: right;">
        <h1>POINTS</h1>
        </div>
        <h2>First Name</h2>
        <p>Male, 24 years old | Lives in Padova, Italy</p>
        </div>
      </div>
      <div class="row">
        <div class="span4">
   		<ul class="thumbnails">
   		  <li class="span4">
   		    <div class="thumbnail">
   		      <span class="overlay">
   		      	<a href="#" class="overlaycaption">Change profile pic</a>
   		      </span>
   		      <img src="http://placehold.it/290x290&text=Profile+Pic" alt="" width="290" height="290">
   		    </div>
   		    <div style="padding-left: 5px; padding-top: 10px;">
   		    <h4>Host Stats:</h4><br />
   		    <p>Average Host Rating:</p>
   		    <p>Average Guest Rating:</p>
   		    <p># Events Hosted:</p>   		    
   		    <p># Events Attended:</p>
   		    </div>
   		  </li>
   		</ul>
        </div>
        <div class="span8">
            <h3>Recent Messages and Comments:</h3>
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
                <small>Someone famous</small>
              </blockquote>
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
                <small>Someone famous</small>
              </blockquote>
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
                <small>Someone famous</small>
              </blockquote>
            <a href="/sendmessage" class="btn" style="margin-left: auto; margin-right: auto;">Leave a message to First Name</a>
            <div id="sexyline"></div>
            <h3>Recent Activities:</h3>
              <p>First Name hosted the event drop.in launch!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non lorem fringilla libero fermentum commodo. Ut ante eros, mattis eu vulputate porttitor, dignissim et risus. Curabitur ac magna pellentesque leo tincidunt faucibus. Nam fermentum sem nec orci gravida vel consectetur eros tristique. Vivamus neque purus, vehicula ac pellentesque vel, eleifend non erat. Praesent euismod ligula sed turpis pulvinar sit amet sodales ante malesuada. Etiam pellentesque, leo eu lacinia tempus, orci augue aliquam nisl, vitae mattis tortor dui vel ante. Mauris egestas elit sit amet leo varius pellentesque. Praesent eleifend tincidunt lectus lobortis dictum. Nulla congue odio vitae diam pulvinar sed rutrum turpis venenatis. Sed dignissim, lorem quis vehicula aliquet, ipsum orci egestas enim, semper tristique sapien erat ut nunc.</p>
	  </div>
      <footer>
        <p style="text-align: center;">&copy; PiP 2012</p>
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

  </body>
</html>
